/*
 * banner轮播图模块
 * @Author: ljb
 * @Date: 2018-11-15 17:28:07
 * @Last Modified by: kanglin
 * @Last Modified time: 2019-01-30 15:29:01
 */
<style lang="less" scoped rel="stylesheet/less" type="text/less" >
    @import '~src/assets/css/common.less';
    @deep: ~">>>";

    .swiper-container {
		.swiper-slide{
			&>img{
				max-width: 100%;
				height: auto;
				vertical-align: top;
			}
		}
	}

    .v-com-banner @{deep} .swiper-pagination-bullet-active{
        background: #ffffff!important;
    }

     .v-com-banner @{deep} .swiper-pagination-bullet{
        background: #afa3a4;
	}
	img[lazy=loading] {
		width: 100%;
		height: 344*@rem-per-px;
	}

</style>
<template>
	<div class="v-com-banner">
		<swiper
			ref="swiper"
			:options="swiperOption"
			style="height: 100%">
			<swiper-slide
				v-for="(item ,index) in getBanner"
				:key="index">
				<img
					:src="item.image"
					alt="">
			</swiper-slide>
			<div
				slot="pagination"
				class="swiper-pagination"/>
		</swiper>
	</div>
</template>

<script>
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';

/**
 * banner轮播图模块
 * @vue-prop {Object} [setting={}] 后端返回的组件数据
 * @vue-data {Object} swiperOption swiper的配置
 * @vue-data {string} [swiperOption.height=4.68px] 组件高度
 * @vue-data {Boolean} [swiperOption.autoHeight=true] 是否高度随内容变化
 * @vue-data {Object} [swiperOption.pagination.el=.swiper-pagination] 分页器元素
 * @vue-data {number} [swiperOption.autoplay.delay=2500] 过渡时间
 * @vue-data {Boolean} [swiperOption.autoplay.disableOnInteraction=false] 是否禁止autoplay
 * @vue-data {Boolean} [swiperOption.loop=false] 是否循环
 * @vue-data {Function} [swiperOption.on.click=handleClick] 处理点击的回调
 * @vue-computed {array} getBanner 返回banner列表数据
 */
export default {
	name: 'Banner',
	components: {
		swiper,
		swiperSlide,
	},
	props: {
		setting: {
			type: Object,
			default() {
				return {};
			},
		},
	},
	data() {
		return {
			swiperOption: {
				height: `${window.lib.flexible.px2rem(344)}rem`,
				autoHeight: true, // 高度随内容变化
				pagination: {
					el: '.swiper-pagination',
				},
				autoplay: {
					delay: 5000,
					disableOnInteraction: false,
				},
				loop: true,
				on: {
					click: this.handleClick.bind(this),
				},
			},
		};
	},
	computed: {
		/**
		 * 返回banner列表
		 * @return {Array} {最新新闻的数组}
		 */
		getBanner() {
			return this.setting ? this.setting.banner_images : [];
		},
	},
	methods: {
		/**
		 * 点击转跳
		 */
		handleClick() {
			if (this.$refs.swiper && this.$refs.swiper.$children) {
				this.$refs.swiper.$children.forEach((element, index) => {
					if (/active/.test(element.$el.className)) {
						this.$emit('link', this.getBanner[index].link);
					}
				});
			}
		},
	},
};
</script>
